<template>
  <div id="excel">
    <el-upload class="upload-demo"
               action="http://localhost:3000/student/addExcelData"
               :on-change="handleChange"
               :auto-upload="false"
               :show-file-list="false"
               multiple
               :limit="3"
               ref="uploadRef"
               accept=".xls, .xlsx">
      <el-button size="middle"
                 type="primary">点击上传</el-button>
    </el-upload>
  </div>
</template>

<script>
import XLSX from 'xlsx'
export default {
  name: 'excel',
  data () {
    return {
      // 用来保存上传的excel数据
      excel: []
    }
  },
  methods: {
    // 文件状态改变时的钩子，添加文件、上传成功和上传失败时都会被调用
    handleChange (file) {
      // console.log(file)
      // 对上传文件的name以.进行分割成两部分，取第二部分进行文件类型验证
      const types = file.name.split('.')[1]
      const fileType = ['xlsx', 'xlc', 'xlm', 'xls', 'xlt', 'xlw', 'csv'].some(valid => valid === types)
      // 判断文件类型是否正确
      if (!fileType) {
        this.$message('格式错误！请重新选择')
        return
      }
      // 调用封装好的readExcel方法
      this.readExcel(file).then(tabJson => {
        if (tabJson && tabJson.length > 0) {
          // const xlsxJson = tabJson
          // console.log('数据:', tabJson)
          // 抽离数据
          tabJson.forEach(valid => {
            valid.sheet.forEach(v => {
              // 将数据保存到excel数组
              this.excel.push(v)
            })
          })
          // console.log(this.excel)
          // 将事件发送出去
          this.$emit('excelList', this.excel)
        }
      })
      // console.log(this.$refs.uploadRef)
      this.$refs.uploadRef.clearFiles()
    },
    // 读取excel的方法
    readExcel (file) {
      // 将它做成一个promise对象
      return new Promise((resolve, reject) => {
        // 使用文件对象打开文件，获取其中内容
        const reader = new FileReader()
        // 固定用法，用来获取文件中的内容
        reader.onload = e => {
          // 获取文件中的内容
          const data = e.target.result
          // 固定用法，以二进制方式读取
          this.wb = XLSX.read(data, {
            type: 'binary'
          })
          // console.log(this.wb)
          // 用来存抽取出来的excel数据
          const result = []
          this.wb.SheetNames.forEach(SheetName => {
            result.push({
              // 这个相当于excel里面的sheet的名字
              sheetName: SheetName,
              // 将excel转换为json格式
              sheet: XLSX.utils.sheet_to_json(this.wb.Sheets[SheetName])
            })
          })
          resolve(result)
        }
        // 以二进制方式打开文件，readAsBinaryString值能读取blob和file对象，而file.ra就是file对线，如果是原生js这就是file[0]
        reader.readAsBinaryString(file.raw)
      })
    },
    // 移除上传的文件，为了防止后续上传数据的时候造成二次上传
    removeFile () {
      // 将上传的文件删除
      this.$refs.uploadRef.clearFiles()
      // 初始化保存的数据
      this.excel = []
    }
  }
}
</script>

<style>
#excel {
  width: 98px;
  height: 40px;
}
</style>
